<template>
  <div class="app-container">
    推荐订单
    <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{ (current - 1) * size + scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="componentName" label="零件" width="200" />
      <el-table-column prop="supplierId" label="供应商id" width="200" />
      <el-table-column prop="supplierName" label="推荐供应商" width="200" align="center">
        <template slot-scope="scope">
          <el-select  @focus="getOptions(scope.row.componentId)" @change="updatePrice(scope.row)" v-model="scope.row.supplierName"  placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.supplierName"
              :label="item.supplierName"
              :value="item.supplierName"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="数量" width="200" align="center"/>
      <el-table-column prop="price" label="价格" width="200" align="center" />
      <el-table-column prop="totalPrice" label="总价" width="200" align="center">
        <template slot-scope="scope">{{ scope.row.count*scope.row.price }}</template>
        </el-table-column>
    </el-table>
    <el-button type="primary">提交</el-button>
  </div>
</template>

<script>
// 引入调用supplierComponent.js
import supplierComponent from "@/api/supplierComponent/supplierComponent";
import component from "@/api/component/component";
export default {
  
  data() {
    // 定义变量和初始值
    return {
      list: this.$route.query.list,
      options: null,
      current: 1,
      size: 10
    };
  },
  created() {
    console.log("跳转之后list集合",this.list)
  },
  methods: {
      // 根据零件id查询供应商供应的零件价钱
    getOptions(componentId){
        supplierComponent.getOptions(componentId).then(response => {
         // console.log(response);
          //提交之后跳转到订单生成界面
          
          this.options = response.data
          console.log(this.options)
          
        })
        .catch(error => {
          // 请求失败
          console.log(error);
        });
    },
    // 选择框中的值变化时，动态改变价格
    updatePrice(row) {
          //this.$router.push({path:'/order/generateOrder',query:{list:this.list}});
        console.log("手动更改了供应商")

        console.log("修改之前row",row)
        let obj = {};
        obj = this.options.find((item)=>{ //这里的carslist就是上面遍历的数据源
       return item.supplierName === row.supplierName;//筛选出匹配数据
     });
     console.log(obj); //obj即是选中的Option数据集合
     //获取到选中的Option数据集并进行其它操作

        row.supplierId = obj.supplierId
        row.price = obj.price
        console.log("修改之后row",row)
    }
  }
};
</script>